<template>
  <!-- <div>商品分类列表</div> -->

  <div class="shop">
    <div class="top">
      <el-button size='small'
        type='primary'
        @click="isShowAddCategory = true">新增分类</el-button>

      <el-button class='search'
        size='small'
        type='primary'
        @click="searchCategoryData">搜索</el-button>
      <el-input class="search input"
        size='small'
        v-model="form.cate_id"
        placeholder="输入id查询"
        clearable></el-input>
      <el-input class="search input"
        size='small'
        v-model="form.cate_name"
        placeholder="输入分类名称查询"
        clearable></el-input>
    </div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='ID'
        prop='id'
        width='100'></el-table-column>
      <el-table-column label='分类名称'
        width='140'>
        <template slot-scope="scope">
          {{scope.row.cate_name}}
          <!--<span class="cetain"
            v-if="scope.row.isCertain">（固定）</span>-->
        </template>
      </el-table-column>
      <el-table-column label='关联选品库数量'
        prop='relation_product_count'
        width='140'></el-table-column>
      <el-table-column label='排序'
        prop='order_sort'></el-table-column>

      <el-table-column label='分类状态'>
        <template slot-scope="scope">
          <el-switch :key="scope.row.id"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.is_enable"
            @change="isUseActivityChange(scope.row.id,$event)"></el-switch>
          <span>{{scope.row.is_enable_word}}</span>
          <!-- <span v-else>已禁用</span> -->
        </template>
      </el-table-column>
      <el-table-column label='操作'
        fixed='right'
        width='240'>
        <template slot-scope="scope">
          <el-button size='mini'
            type='primary'
            @click="changeShopCate(scope.row)">修改</el-button>
          <el-button size='mini'
            @click="gotoSaleDaily(scope.row.id)">销售日志</el-button>
          <el-button size='mini'
            @click="deleteShopCate(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <jdialog title="新增商品展示分类"
      :visible.sync="isShowAddCategory"
      width="640px">
      <el-form :model='cateForm'
        :rules="rules"
        class="demo-ruleForm"
        label-width="140px">
        <el-form-item label="商品分类名称："
          prop="title">
          <el-input v-model="cateForm.cate_name"
            style='width:180px;'
            size='mini'
            placeholder='请输入商品分类名称'></el-input>
        </el-form-item>

        <el-form-item label='商品分类排序：'
          prop='order'>
          <el-input v-model='cateForm.order_sort'
            style='width:140px;'
            size='mini'
            placeholder='0～99'></el-input>
        </el-form-item>

        <el-form-item label='分类专场图片：'
          prop='img_url'>
          <uploadImg flieName="img_url"
            class="icon_cate"
            :oldImgs="[cateForm.img_url]"
            :n="1"
            @getFile="getFile"></uploadImg>
          <p class='note'>支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>
        <el-form-item label='banner链接：'>
          <el-input v-model='cateForm.jump_link'
            style='width:320px;'
            size='mini'
            placeholder='请输入跳转链接'></el-input>
            <p>分类链接支持跳转商品详情，输入商品ID即可</p>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="cateForm.is_enable">
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label='分类限制购买次数：'>
          <el-select style="width:130px;"
            v-model="cateForm.limit"
            filterable
            size='mini'
            placeholder="限制时间">
            <el-option label='天'
              value='1'></el-option>
            <el-option label='周'
              value='2'></el-option>
            <el-option label='月'
              value='3'></el-option>
          </el-select>
          <el-select style="width:130px;margin-left:12px;"
            v-model="cateForm.limit_num"
            filterable
            size='mini'
            placeholder="次数限制">
            <el-option label='1次'
              value='1'></el-option>
            <el-option label='3次'
              value='3'></el-option>
            <el-option label='5次'
              value='5'></el-option>
            <el-option label='7次'
              value='7'></el-option>
            <el-option label='10次'
              value='10'></el-option>
            <el-option label='15次'
              value='15'></el-option>
            <el-option label='30次'
              value='30'></el-option>
            <el-option label='无限制'
              value='0'></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>

      <div class='align'>
        <el-button size='mini'
          @click='isShowAddCategory = false'>取消</el-button>
        <el-button size='mini'
          type='primary'
          @click='certainAddCategory'>确定</el-button>
      </div>
    </jdialog>

    <!--新人专区修改-->
    <jdialog title="新人专区修改"
      :visible.sync="isShowModifyCategory"
      width="640px">
      <el-form :model='modifyForm'
        :rules="modelrules"
        class="demo-ruleForm"
        label-width="140px">

        <el-form-item label="商品分类名称："
          prop="title">
          <el-input v-model="modifyForm.cate_name"
            style='width:180px;'
            size='mini'
            placeholder='请输入商品分类名称'></el-input>
        </el-form-item>

        <el-form-item label='商品分类排序：'
          prop='order'>
          <el-input v-model='modifyForm.order_sort'
            style='width:140px;'
            size='mini'
            placeholder='0～99'></el-input>
        </el-form-item>

        <el-form-item label='分类专场图片：'
          prop='img_url'>
          <uploadImg flieName="img_url"
            class="icon_cate"
            :oldImgs="[modifyForm.img_url]"
            :n="1"
            @getFile="getModifyFile"></uploadImg>
          <p class='note'>支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>
        <el-form-item label='banner链接：'>
          <el-input v-model='modifyForm.jump_link'
            style='width:320px;'
            size='mini'
            placeholder='请输入跳转链接'></el-input>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="modifyForm.is_enable">
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div class='align'>
        <el-button size='mini'
          @click='isShowModifyCategory = false'>取消</el-button>
        <el-button size='mini'
          type='primary'
          @click='certainModifyCategory'>确定</el-button>
      </div>
    </jdialog>
  </div>
</template>


<script>
import uploadImg from "@/components/uploadImg";
import {  supplyproductCateList,
  productCateIsEnableUpdate,
  productCateCreate,
  productCateIdDelete,
  productCateIDUpdate} from "@/api/autarky"
export default {
  components: {
    uploadImg
  },
  data () {
    return {
      isShowAddCategory: false,

      isShowModifyCategory: false,
      showCate_id: '',

      form: {
        cate_id: '',
        cate_name: '',
        page: 1,
        size: 20,
      },

      total: 0,
      tableData: [],


      cateForm: {
        cate_name: '',
        order_sort: '',
        img_url: '',
        jump_link: '',
        is_enable: '0'
      },
      rules: {
        cate_name: [
          { required: true, message: '请输入商品分类名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }],
        order_sort: [{ required: true, message: '请输入商品分类排序', trigger: 'blur' }],
        img_url: [
          { required: true, message: '请上传分类专场图片', trigger: 'blur' }
        ],
      },

      modifyForm: {
        cate_name: '',
        order_sort: '',
        img_url: '',
        jump_link: '',
        is_enable: '',
      },
      modelrules: {
        cate_name: [
          { required: true, message: '请输入商品分类名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }],
        order_sort: [{ required: true, message: '请输入商品分类排序', trigger: 'blur' }],
        img_url: [
          { required: true, message: '请上传分类专场图片', trigger: 'blur' }
        ],
      }
    }
  },
  mounted () {
    this.getsupplyproductCateListData()
  },
  methods: {

    //搜索数据
    searchCategoryData () {
      this.getsupplyproductCateListData()
    },
    pageChange (page) {
      this.form.page = page
      //获取更多数据
      this.getsupplyproductCateListData()
    },
    //更改商品分类状态
    isUseActivityChange (id, e) {
      //更新成功后重新获取商品
      this.getproductCateIsEnableUpdateData(id, e)
    },

    //修改商品分类
    changeShopCate (data) {
      this.showCate_id = data.id
      this.modifyForm = {cate_name: data.cate_name,
        order_sort: data.order_sort,
        img_url: data.img_url,
        jump_link: data.jump_link,
        is_enable: data.is_enable+''}
      this.isShowModifyCategory = true
    },
    //跳转销售日志
    gotoSaleDaily (id) {
      console.log(id)
      this.$router.push({
        path: './privateorderlist',
        query: { cate_id: id }
      })
    },
    //删除商品分类
    deleteShopCate (id) {
      this.$confirm('确认删除该商品分类？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.getproductCateIdDeleteData(id)
      }).catch(() => {
        console.log('cancel')
      });
    },
    //确定新增分类
    certainAddCategory () {
      this.getproductCateCreateData()
    },
    //确定修改分类
    certainModifyCategory () {
       this.getproductCateIDUpdateData()
    },
    //获取商品分类列表数据
    async getsupplyproductCateListData () {
      var url = "id=" + this.form.cate_id +
        "&cate_name=" + this.form.cate_name +
        "&page=" + this.form.page +
        "&is_enable="
      let res = await supplyproductCateList(url)
      if (res.code === 10000) {
        this.tableData = res.data.data
        this.total = res.data.total
      } else {
        this.$message.error(res.message)
      }
    },
    //更新商品分类可用状态
    async getproductCateIsEnableUpdateData (product_id, is_enable) {
      let res = await productCateIsEnableUpdate(product_id, { is_enable: is_enable })
      if (res.code === 10000) {
        this.$message.success(res.message)
        this.getsupplyproductCateListData()
      } else {
        this.$message.error(res.message)
      }
    },
    //新增商品分类
    async getproductCateCreateData () {
      let res = await productCateCreate(this.cateForm)
      if (res.code === 10000) {
        this.cateForm = {}
        this.$message.success(res.message)
        this.getsupplyproductCateListData()
        this.isShowAddCategory = false
      } else {
        this.$message.error(res.message)
      }
    },
    //修改商品分类
    async getproductCateIDUpdateData(){
      let res = await productCateIDUpdate(this.showCate_id ,this.modifyForm)
      if (res.code === 10000) {
        this.modifyForm = {}
        this.showCate_id = ''
        this.$message.success(res.message)
        this.getsupplyproductCateListData()
        this.isShowModifyCategory = false
      } else {
        this.$message.error(res.message)
      }
    },
    //删除商品分类
    async getproductCateIdDeleteData (cate_id) {
      console.log(cate_id)
      let res = await productCateIdDelete(cate_id)
      if (res.code === 10000) {
        this.$message.success(res.message)
        this.getsupplyproductCateListData()
      } else {
        this.$message.error(res.message)
      }

    },
    getFile (file) {
      this.cateForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },

    getModifyFile (file) {
      this.modifyForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .top {
    margin-bottom: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 150px;
    }
  }

  .cetain {
    color: #f4222d;
  }
  .pagination {
    float: right;
    margin-top: 12px;
  }

  .icon_cate {
    float: left;
  }
  .demo-ruleForm {
    padding: 20px;
  }
  .note {
    color: #666666;
    font-size: 14px;
    margin-top: 28px;
  }
  .align {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>